<template>
  <div ref="echartDom"></div>
</template>

<script setup lang="ts">
import { inject, ref, shallowRef, onMounted, onUnmounted, watchEffect } from "vue";
import { pxToRem } from "@/utils/index";

// 接收参数
const props = defineProps({
  housingSupplyStatsData: {
    type: Object,
    default: () => {},
  },
  type: {
    type: Number,
    default: "",
  },
});

// 数据定义
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
const zgdata = ref();
const zgColor = props.housingSupplyStatsData.innerColor;
zgdata.value = props.housingSupplyStatsData.innerCircle;

// echarts初始化渲染
const getEchart = () => {
  if (echartDom.value) {
    myChart.value = echarts.init(echartDom.value);
    const option = {
      tooltip: {
        trigger: "item",
        formatter: function (params: any) {
          return params.name + "：" + params.value + " " + "(" + params.percent + "%)";
        },
        axisPointer: {
          type: "line",
          lineStyle: {
            color: "rgba(40,252,255,0.6)",
            shadowBlur: 10,
            shadowColor: "rgba(0, 0, 0, 0.9)",
          },
        },
        textStyle: {
          color: "#fff",
          fontSize: pxToRem(18),
        },
        backgroundColor: "rgba(8, 64, 132, 0.9)",
      },
      legend: {
        show: true,
        orient: "vertical",
        icon: "rect",
        bottom: 0,
        top: props.type == 1 ? pxToRem(450) : pxToRem(165),
        left: props.type == 1 ? pxToRem(450) : pxToRem(10),
        itemWidth: pxToRem(24),
        itemHeight: pxToRem(12),
        itemGap: pxToRem(10),
        formatter: function (name: any) {
          let total = 0;
          let target;
          let rate;
          for (var i = 0; i < zgdata.value.length; i++) {
            total += zgdata.value[i].value;
          }
          for (var i = 0; i < zgdata.value.length; i++) {
            if (zgdata.value[i].name == name) {
              target = zgdata.value[i].value;
              rate = ((target / total) * 100).toFixed(2);
            }
          }
          return `${name}   ${target}   ${rate == "NaN" ? 0 : rate}%`;
        },
        textStyle: {
          color: "#fff",
          fontSize: pxToRem(12),
        },
      },
      series: [
        {
          top: pxToRem(-65),
          left: pxToRem(0),
          name: "",
          type: "pie",
          position: "inside",
          radius: ["40%", "60%"],
          labelLine: {
            show: false, // 显示指示线
          },
          label: {
            show: true,
            position: "center",
            formatter: "{a|面积}",
            rich: {
              a: {
                fontSize: pxToRem(18),
                color: "#fff",
              },
            },
          },
          itemStyle: {
            normal: {
              color: function (params: any) {
                return zgColor[params.dataIndex];
              },
            },
          },
          data: zgdata.value,
        },
      ],
    };
    myChart.value.setOption(option);
  }
};

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  props.housingSupplyStatsData;
  zgdata.value = props.housingSupplyStatsData.innerCircle;
  getEchart();
};

watchEffect(() => {
  updateChart();
});

onMounted(() => {
  getEchart();
  window.addEventListener("resize", updateChart);
});

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
});
</script>
